<template>
  <div>
    <!-- <page2playList  :Id=1 :MusicId=2 :UserId=3  :MusicName="4"  :MusicAuthor="5"  :MusicUrl="6"></page2playList> -->
    <p></p>
    <div style="">
      <van-button icon="http://rul4y8e5f.hn-bkt.clouddn.com/%E5%88%A0%E9%99%A4%20%282%29.png" size="small" round @click="deleteAllplayList()">清空播放列表</van-button>

    </div>
    <van-list
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        >
        <page2playList
        v-for="item in this.list"
        :key="item.id"
        :Id="item.id"
        :UserId="item.userId"
        :MusicId="item.musicId"
        :MusicName="item.musicName"
        :MusicAuthor="item.musicAuthor"
        :MusicUrl="item.musicUrl"
        :MusicIcon="item.musicIcon"
        ></page2playList>

    </van-list>
  </div>
</template>

<script>
import page2playList from '@/views/Music/playList/page2playList.vue';
// import PlayListAPI from '@/api/PlayListAPI';
import PlayListAPI from '@/api/PlayListAPI.js'
export default {
  components: { page2playList },

  name: 'MusicPlayList',

  props: {
    playLists:{
      
    }
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
    };
  },
  comments: {
    page2playList,
  },
  created(){
  
    this.getMusicPlayList()
  },
  methods: {

    // 清空播放列表
    deleteAllplayList(){
      var result =   PlayListAPI.deleteAll2PlayList()
       // 获取返回结果
       result.then((val)=>{
        // console.log(val)
        if(val.success){
         this.$toast("清空成功")
          // this.console.log(this.list)
          // this.$router.go(0)
            this.getMusicPlayList()
        }else{
          this.console.log(val.errorMsg)
          this.$toast(val.errorMsg)
        }
            })
    },

    // 创建时获取播放列表
    getMusicPlayList(){
      // this.$toast("6666")
      var result = PlayListAPI.GetPlayList()
      // 获取返回结果
      result.then((val)=>{
        // console.log(val)
        if(val.success){
         
      // 将数据存到list里面
          this.list=val.data
          // this.console.log(this.list)
  
        }else{
          this.console.log(val.errorMsg)
          this.$toast(val.errorMsg)
        }
            })
    },
    // onLoad() {
    //   // 异步更新数据
    //   // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    //   setTimeout(() => {
    //     for (let i = 0; i < 10; i++) {
    //       this.list.push(this.list.length + 1);
    //     }

    //     // 加载状态结束
    //     this.loading = false;

    //     // 数据全部加载完成
    //     if (this.list.length >= 40) {
    //       this.finished = true;
    //     }
    //   }, 1000);
    // },
  },
}
</script>

<style lang="less">

</style>